<template>
  <div>
    <div class="main">
      <p class="title">商家基本信息</p>
      <div class="form">
        <el-form
          :disabled="disabled"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-position="left"
          label-width="130px"
        >
          <el-form-item label="商家名称" prop="name">
            <el-input v-model="ruleForm.name" :disabled="isdisabel"></el-input>
          </el-form-item>
          <el-form-item label="商家简介" prop="introduce">
            <el-input type="textarea" v-model="ruleForm.introduce"></el-input>
          </el-form-item>
          <el-form-item label="门店电话" prop="mobile">
            <el-input v-model="ruleForm.mobile"></el-input>
          </el-form-item>
          <el-form-item label="营业时间" prop="startAt">
            <el-input v-model="ruleForm.startAt"></el-input>
          </el-form-item>
          <el-form-item label="规模" prop="subheading">
            <el-input v-model="ruleForm.subheading"></el-input>
          </el-form-item>
          <el-form-item label="门店地址" prop="address">
            <el-input v-model="ruleForm.address"></el-input>
          </el-form-item>
          <el-form-item label="营业资质" prop="shareImg" required>
            <el-upload
              class="avatar-uploader"
              :action="baseUrl + '/common/upload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :on-progress="progressUpload"
              :v-loading="loading"
            >
              <img
                v-if="ruleForm.shareImg"
                :src="ruleForm.shareImg"
                class="avatar"
              />
              <i v-else class="avatar el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="店铺LOGO" prop="shareImg" required>
            <el-upload
              class="avatar-uploader"
              :action="baseUrl + '/common/upload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess1"
              :before-upload="beforeAvatarUpload"
              :on-progress="progressUpload"
              :v-loading="loading"
            >
              <img v-if="ruleForm.img" :src="ruleForm.img" class="avatar" />
              <i v-else class="avatar el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="负责人姓名" prop="coordinate">
            <el-input v-model="ruleForm.coordinate"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="*审核未通过提示" prop="tips" v-if="ruleForm.check == 2" style="color: #e60012">
            <el-input v-model="ruleForm.tips" :disabled="isdisabel"></el-input>
          </el-form-item>
          <el-form-item class="el_form_item">
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
              :disabled="disabled"
              >{{ ruleForm.check == 0 ? "审核中" : "修改" }}</el-button
            >
            <span
              ref="refspan1"
              :class="[
                ruleForm.check == 1
                  ? 'span_1'
                  : ruleForm.check == 2
                  ? 'span_2'
                  : '',
              ]"
              >{{
                ruleForm.check == 1
                  ? "审核通过"
                  : ruleForm.check == 2
                  ? "审核失败"
                  : ""
              }}</span
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      disabled: true,
      baseUrl: "",
      isdisabel: false,
      ruleForm: {},
      rules: {
        name: [
          { required: true, message: "请输入商家名称", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        introduce: [
          { required: true, message: "请输入商家简介", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入门店电话", trigger: "blur" },
        ],
        startAt: [
          { required: true, message: "请输入营业时间", trigger: "blur" },
        ],
        subheading: [
          { required: true, message: "请输入规模", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入门店地址", trigger: "blur" },
        ],
        coordinate: [
          { required: true, message: "请输入负责人姓名", trigger: "blur" },
        ],
        phone: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
      },
      loading: false,
    };
  },
  mounted() {
    this.baseUrl = this.$baseUrl;
    this.getInfo();
  },
  methods: {
    // 获取店铺信息
    getInfo() {
      const that = this;
      this.$getRequest(
        "/shop/shop/" + sessionStorage.getItem("shopId"),
        {}
      ).then((res) => {
        console.log(res);
        if (res.data.shopShop.name && res.data.shopShop.name != "") {
          that.isdisabel = true;
        }
        that.ruleForm = res.data.shopShop;
        console.log(that.ruleForm);
        if (that.ruleForm.check == 0) {
          that.disabled = true;
        } else {
          that.disabled = false;
        }
      });
    },
    handleAvatarSuccess(res) {
      if (res.code == 200) {
        this.ruleForm.shareImg = res.msg;
        this.loading = false;
        this.$forceUpdate();
      } else {
        this.$message.arror(res.msg);
      }
    },
    handleAvatarSuccess1(res) {
      if (res.code == 200) {
        this.ruleForm.img = res.msg;
        this.loading = false;
        this.$forceUpdate();
      } else {
        this.$message.arror(res.msg);
      }
    },
    beforeAvatarUpload(file) {
      var name = file.name;
      var ext = name.substr(name.lastIndexOf(".") + 1);
      var flag =
        [
          "png",
          "jpg",
          "jpeg",
          "bmp",
          "gif",
          "webp",
          "psd",
          "svg",
          "tiff",
        ].indexOf(ext.toLowerCase()) !== -1;
      if (!flag) {
        this.$message.error("请上传正确的图片");
      }
      return flag;
    },
    progressUpload() {
      this.loading = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.shareImg == "") {
            this.$message.error("请上传营业资质");
          } else if (this.ruleForm.img == "") {
            this.$message.error("请上传店铺LOGO图");
          } else {
            this.$setRequest(
              "/shop/shop",
              {
                id: this.ruleForm.id,
                introduce: this.ruleForm.introduce,
                mobile: this.ruleForm.mobile,
                address: this.ruleForm.address,
                startAt: this.ruleForm.startAt,
                subheading: this.ruleForm.subheading,
                coordinate: this.ruleForm.coordinate,
                shareImg: this.ruleForm.shareImg,
                img: this.ruleForm.img,
                phone: this.ruleForm.phone,
              },
              "put"
            ).then((res) => {
              if (res.code == 200) {
                this.$message.success("修改成功");
                this.$router.go(0);
                console.log(res);
              }
            });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  margin: 20px;
  background: #fff;
  .title {
    font-size: 18px;
    padding: 0 20px;
    line-height: 60px;
    border-bottom: 1px solid #eee;
  }
  .form {
    width: 50%;
    padding: 20px;
    .avatar {
      height: 150px;
      width: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #dcdfe6;
    }
    .span_1 {
      color: #0659d6;
    }
    .span_2 {
      color: red;
    }
  }
}
/deep/ .el-input.is-disabled .el-input__inner,
/deep/ .el-textarea.is-disabled .el-textarea__inner {
  color: #333;
}
/deep/ .el-button--primary {
  background-color: #0655ce;
  border-color: #0655ce;
}
</style>
